<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#1e3a8f">
    <title>PWA离线功能测试 - 精英杂志</title>
    <link href="/css/pwa-styles.css" rel="stylesheet">
    <link href="/css/mobile-optimization.css" rel="stylesheet">
    <style>
        .test-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .test-item {
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 8px;
            border-left: 4px solid #3b82f6;
            background: #f8fafc;
        }
        
        .test-success {
            border-left-color: #10b981;
            background: #f0fdf4;
        }
        
        .test-error {
            border-left-color: #ef4444;
            background: #fef2f2;
        }
        
        .test-warning {
            border-left-color: #f59e0b;
            background: #fffbeb;
        }
        
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-online { background: #10b981; }
        .status-offline { background: #ef4444; }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }
        
        .feature-card {
            padding: 1.5rem;
            border-radius: 8px;
            background: white;
            border: 1px solid #e5e7eb;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .test-container {
                margin: 1rem;
                padding: 1rem;
            }
            
            .feature-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (prefers-color-scheme: dark) {
            .test-container {
                background: #1e293b;
                color: #e2e8f0;
            }
            
            .test-item {
                background: #334155;
                color: #e2e8f0;
            }
            
            .feature-card {
                background: #334155;
                border-color: #475569;
                color: #e2e8f0;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <a class="navbar-brand" href="/">精英杂志</a>
            <div class="navbar-nav">
                <span id="network-status" class="nav-link">
                    <span id="status-indicator" class="status-indicator"></span>
                    <span id="status-text">检测中...</span>
                </span>
                <a class="nav-link" href="/">返回首页</a>
            </div>
        </div>
    </nav>
    
    <main class="container">
        <div class="test-container">
            <h1 class="text-center mb-4">🧪 PWA离线功能测试</h1>
            <p class="text-center text-muted mb-5">测试精英杂志PWA应用的离线功能和性能表现</p>
            
            <div class="feature-grid">
                <div class="feature-card">
                    <h3>📱 安装功能</h3>
                    <p>测试PWA安装提示和安装流程</p>
                    <button id="test-install" class="pwa-button">测试安装</button>
                </div>
                
                <div class="feature-card">
                    <h3>🔄 缓存策略</h3>
                    <p>验证Service Worker缓存机制</p>
                    <button id="test-cache" class="pwa-button">测试缓存</button>
                </div>
                
                <div class="feature-card">
                    <h3>🌐 离线访问</h3>
                    <p>测试断网情况下的页面访问</p>
                    <button id="test-offline" class="pwa-button">测试离线</button>
                </div>
                
                <div class="feature-card">
                    <h3>⚡ 性能测试</h3>
                    <p>检测页面加载速度和资源优化</p>
                    <button id="test-performance" class="pwa-button">性能测试</button>
                </div>
            </div>
            
            <h3 class="mb-3">🔍 测试结果</h3>
            <div id="test-results">
                <div class="test-item">
                    <strong>网络状态检测</strong>
                    <div id="network-test-result">等待测试...</div>
                </div>
                
                <div class="test-item">
                    <strong>Service Worker状态</strong>
                    <div id="sw-test-result">等待测试...</div>
                </div>
                
                <div class="test-item">
                    <strong>缓存存储状态</strong>
                    <div id="cache-test-result">等待测试...</div>
                </div>
                
                <div class="test-item">
                    <strong>Manifest配置</strong>
                    <div id="manifest-test-result">等待测试...</div>
                </div>
            </div>
            
            <div class="mt-4 p-3 bg-light rounded">
                <h4>💡 测试说明</h4>
                <ul class="mb-0">
                    <li><strong>安装功能：</strong>检查PWA安装提示是否正常显示</li>
                    <li><strong>缓存策略：</strong>验证静态资源是否正确缓存</li>
                    <li><strong>离线访问：</strong>模拟离线状态测试页面访问</li>
                    <li><strong>性能测试：</strong>检测页面加载优化效果</li>
                </ul>
            </div>
        </div>
    </main>
    
    <script>
        // 网络状态检测
        function updateNetworkStatus() {
            const statusIndicator = document.getElementById('status-indicator');
            const statusText = document.getElementById('status-text');
            const networkResult = document.getElementById('network-test-result');
            
            if (navigator.onLine) {
                statusIndicator.className = 'status-indicator status-online';
                statusText.textContent = '在线';
                networkResult.innerHTML = '<span class="text-success">✅ 网络连接正常</span>';
                networkResult.parentElement.classList.add('test-success');
            } else {
                statusIndicator.className = 'status-indicator status-offline';
                statusText.textContent = '离线';
                networkResult.innerHTML = '<span class="text-danger">❌ 网络连接已断开</span>';
                networkResult.parentElement.classList.add('test-error');
            }
        }
        
        // Service Worker状态检测
        async function checkServiceWorker() {
            const swResult = document.getElementById('sw-test-result');
            
            if ('serviceWorker' in navigator) {
                try {
                    const registration = await navigator.serviceWorker.getRegistration();
                    if (registration) {
                        swResult.innerHTML = '<span class="text-success">✅ Service Worker已注册</span><br>' +
                            '<small>作用域: ' + registration.scope + '</small>';
                        swResult.parentElement.classList.add('test-success');
                    } else {
                        swResult.innerHTML = '<span class="text-warning">⚠️ Service Worker未注册</span>';
                        swResult.parentElement.classList.add('test-warning');
                    }
                } catch (error) {
                    swResult.innerHTML = '<span class="text-danger">❌ Service Worker检测失败: ' + error.message + '</span>';
                    swResult.parentElement.classList.add('test-error');
                }
            } else {
                swResult.innerHTML = '<span class="text-danger">❌ 浏览器不支持Service Worker</span>';
                swResult.parentElement.classList.add('test-error');
            }
        }
        
        // 缓存状态检测
        async function checkCache() {
            const cacheResult = document.getElementById('cache-test-result');
            
            if ('caches' in window) {
                try {
                    const cacheNames = await caches.keys();
                    if (cacheNames.length > 0) {
                        let cacheInfo = '<span class="text-success">✅ 缓存存储正常</span><br>';
                        for (const cacheName of cacheNames) {
                            const cache = await caches.open(cacheName);
                            const requests = await cache.keys();
                            cacheInfo += '<small>• ' + cacheName + ' (' + requests.length + ' 个资源)</small><br>';
                        }
                        cacheResult.innerHTML = cacheInfo;
                        cacheResult.parentElement.classList.add('test-success');
                    } else {
                        cacheResult.innerHTML = '<span class="text-warning">⚠️ 未找到缓存存储</span>';
                        cacheResult.parentElement.classList.add('test-warning');
                    }
                } catch (error) {
                    cacheResult.innerHTML = '<span class="text-danger">❌ 缓存检测失败: ' + error.message + '</span>';
                    cacheResult.parentElement.classList.add('test-error');
                }
            } else {
                cacheResult.innerHTML = '<span class="text-danger">❌ 浏览器不支持Cache API</span>';
                cacheResult.parentElement.classList.add('test-error');
            }
        }
        
        // Manifest配置检测
        async function checkManifest() {
            const manifestResult = document.getElementById('manifest-test-result');
            
            try {
                const response = await fetch('/manifest.json');
                if (response.ok) {
                    const manifest = await response.json();
                    manifestResult.innerHTML = '<span class="text-success">✅ Manifest配置正常</span><br>' +
                        '<small>应用名称: ' + (manifest.name || manifest.short_name || '未设置') + '</small><br>' +
                        '<small>显示模式: ' + (manifest.display || '未设置') + '</small>';
                    manifestResult.parentElement.classList.add('test-success');
                } else {
                    manifestResult.innerHTML = '<span class="text-danger">❌ Manifest文件无法访问</span>';
                    manifestResult.parentElement.classList.add('test-error');
                }
            } catch (error) {
                manifestResult.innerHTML = '<span class="text-danger">❌ Manifest检测失败: ' + error.message + '</span>';
                manifestResult.parentElement.classList.add('test-error');
            }
        }
        
        // 测试按钮事件
        document.getElementById('test-install').addEventListener('click', function() {
            if (window.pwaInstallManager) {
                window.pwaInstallManager.showInstallPrompt();
            } else {
                alert('PWA安装管理器未初始化');
            }
        });
        
        document.getElementById('test-cache').addEventListener('click', checkCache);
        
        document.getElementById('test-offline').addEventListener('click', function() {
            alert('请手动断开网络连接，然后刷新页面测试离线功能');
        });
        
        document.getElementById('test-performance').addEventListener('click', function() {
            const timing = performance.timing;
            const loadTime = timing.loadEventEnd - timing.navigationStart;
            alert('页面加载时间: ' + loadTime + 'ms');
        });
        
        // 初始化测试
        window.addEventListener('load', function() {
            updateNetworkStatus();
            checkServiceWorker();
            checkCache();
            checkManifest();
        });
        
        // 监听网络状态变化
        window.addEventListener('online', updateNetworkStatus);
        window.addEventListener('offline', updateNetworkStatus);
        
        // 监听Service Worker更新
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.addEventListener('controllerchange', function() {
                location.reload();
            });
        }
    </script>
</body>
</html>